

<template>
  <div class="index-page" style="height: 100%">
    <!-- 头部区域，包含登录按钮 -->

    <el-container class="index-page">

    <el-header height="40px" style="background-color: #7f1313; height: 40px;">

      <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color=" #7f1313
" text-color="#ffffff" active-text-color="#ffffff">
        <el-menu-item index="/index">奖学金管理系统</el-menu-item>
        <el-submenu index="2" >
          <template slot="title">登录</template>
          <el-menu-item index="/slogin">学生</el-menu-item>
          <el-menu-item index="/tlogin">辅导员</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" >评定规则</el-menu-item>
      </el-menu>

      <div class="line"></div>

    </el-header>

    <!-- 主要内容区域，包含走马灯图片 -->
    <el-main >

      <el-carousel interval="4000" arrow="always"  height="905px">

        <el-carousel-item v-for="item in carouselList" :key="item.id">
          <img :src="item.src" alt="carousel-image" style="width: 100%; height: 100%;">
        </el-carousel-item>
      </el-carousel>

    </el-main>
    </el-container>
  </div>

</template>


<script>
export default {
  name: 'index',
  data() {
    return {
      // 假设的图片列表
      carouselList: [
        { id: 1, src: require('@/assets/1.jpg') },
        { id: 2, src: require('@/assets/2.jpg') },
        { id: 3, src: require('@/assets/1.jpg') }
      ]
    };
  },
  methods: {
    // 点击登录按钮执行的方法
    handleSelect(key, keyPath) {
      this.$router.push(key, keyPath);
    }
  }
};
</script>

<style scoped>

.el-main{
  width: 100%;height: 100%;text-align: center;background-color: rgba(251,252,252,1);
  padding:0;
}
body>.el-container {
  margin-bottom: 40px;
  height: 100%;
}
.container{
  height: 100vh;
}
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-main {
  height: calc(100% - 40px); /* 根据实际的头部高度调整 */
}

</style>
